<template>
	<view class="">
		<GdMap :routeInfo="routeInfo" :isPhoneGps="isPhoneGps" @upladPhoneGps="upladPhoneGps" />
		<u-slider :value="currentTime" min="0" max="91" @changing="changing" @change=change></u-slider>
	</view>
</template>

<script>
	import GdMap from "./maps.vue"
	import dayjs from 'dayjs'
	import dataes from "./data.js"
	export default {
		components: {
			GdMap
		},
		data() {
			return {
				isPhoneGps: false,
				startTime: "2024-06-07 17:23:03",
				routeInfo: {
					rideRouteList: [],
					driveRouteList: [],
					routeExtList: []
				},
				rideRouteList: [],
				driveRouteList: [],
				currentTime: 0,
				isReset: false,
				hehe: true
			}
		},
		mounted() {
			
			setTimeout(()=> {
				this.getRouteData()
				this.videoTimeChange(this.currentTime)
				setInterval(()=> {
					
					if(this.currentTime > 92) return
					
					this.currentTime++
					
					// let diffInSeconds = dayjs().diff(dayjs(this.startTime), 'seconds')
					// console.log("diffInSeconds============",diffInSeconds)
					
					this.videoTimeChange(this.currentTime)
				},1000)
			}, 1000)
			
			this.routeInfo = dataes.routeInfo
			
			console.log("dataes====", this.routeInfo)
			
			
		},
		methods: {
			getRouteData() {
				const _this = this
				let routeInfo = dataes.hehe
				_this.rideRouteList = routeInfo.rideRouteList;
				_this.driveRouteList = routeInfo.driveRouteList;
				_this.rideRouteList = _this.rideRouteList.map((item, index)=> {
					item.index = index
					item.diffInSeconds = dayjs(item.recordTime).diff(dayjs(_this.startTime), 'seconds');
					return item
				})
				_this.driveRouteList = _this.driveRouteList.map((item, index)=> {
					item.index = index + _this.rideRouteList.length
					item.diffInSeconds = dayjs(item.recordTime).diff(dayjs(_this.startTime), 'seconds');
					return item
				})
			},
			videoTimeChange(currentTime) {
			
				const _this = this
				
				if(!_this.hehe) return
				
				console.log("=================", currentTime)
				
				_this.routeInfo.rideRouteList = _this.rideRouteList.filter((rItem)=> {
					return rItem.index < currentTime + 1
				})
				_this.routeInfo.driveRouteList = _this.driveRouteList.filter((dItem)=> {
				 	return dItem.index < currentTime + 1
				})
				_this.routeInfo.isReset = this.isReset
				this.isReset = false
				
				
				
			},
			changing(e) {
				console.log("changing====",e)
				this.hehe = false
			},
			change(e) {
				console.log(e)
				this.currentTime = e
				this.isReset = true
				setTimeout(()=> {
					this.hehe = true
				}, 100)
			}
		}
	}
</script>

<style>
</style>